<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="changeIsEdit">{{isEdit?'完成':'编辑'}}</button>
        <input ref="inpRef" v-if="isEdit" v-model="str" type="text">
        <span v-else>{{str}}</span>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            isEdit:false,
            str:"一会下课了，晚上吃什么呢？"
        },
        methods:{
            changeIsEdit(){
                this.isEdit = !this.isEdit;
                this.$nextTick(function(){
                    // 当视图更新后执行
                    this.$refs.inpRef.focus();
                })
            }
        }
    })
</script>
</html>